import React from 'react'
import styled from 'styled-components'
import { NavLink,useLocation } from 'react-router-dom'
import {colors} from "../../../common/common";
import {useTranslation} from "react-i18next";

const Nav: React.FC = () => {
    const {t} = useTranslation();
  return (
    <StyledNav>
      <StyledLink exact activeClassName="active" to="/">{t('ocean')}</StyledLink>
      <StyledLink exact activeClassName="active" to="/Atlantis">{t('atlantis')}</StyledLink>
      <StyledLink exact activeClassName="active" to="/Cay">{t('cay')}</StyledLink>
      <StyledLink exact activeClassName="active" to="/Combine">合成</StyledLink>
        <StyledLink exact activeClassName="active" to="/PicBook">{t('picbook')}</StyledLink>
        <StyledLink exact activeClassName="active" to="/Market">{t('market')}</StyledLink>
        <StyledLink exact activeClassName="active" to="/MyFishCard">我的鱼卡</StyledLink>
    </StyledNav>
  )
}

const StyledNav = styled.nav`
  display: flex;
  position:relative;
  z-index:1;
  background-color:${colors.white};
  border-radius: 18px;
  margin-left:45px;
  @media (max-width: 768px) {
    justify-content: space-around;
  }
`

const StyledLink = styled(NavLink)`
  color: ${colors.black};
  font-weight: 800;
  font-size:20px;
  text-decoration: none;
  padding-left:30px;
  padding-right:30px;
  line-height:38px;
  border-radius: 18px;
  // &:hover {
  //   color: ${colors.white};
  // }
  &.active {
    color: ${colors.white};
    background-color:${colors.main};
  }
  @media (max-width: 768px) {
    font-size: 16px;
    margin-left: 1px;
    margin-right: 1px;
    text-align: center;
  }
`

export default Nav
